﻿<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport"
              content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
        <link rel="Bookmark" href="favicon.ico">
        <link rel="Shortcut Icon" href="favicon.ico"/>
        <link rel="stylesheet" type="text/css" href="resources/h-ui/static/h-ui/css/H-ui.min.css"/>
        <link rel="stylesheet" type="text/css" href="resources/h-ui/static/h-ui.admin/css/H-ui.admin.css"/>
        <link rel="stylesheet" type="text/css" href="resources/h-ui/lib/Hui-iconfont/1.0.8/iconfont.css"/>
        <link rel="stylesheet" type="text/css" href="resources/h-ui/static/h-ui.admin/skin/default/skin.css" id="skin"/>
        <link rel="stylesheet" type="text/css" href="resources/h-ui/static/h-ui.admin/css/style.css"/>
        <title>HowToDoIt:UserManager-Admin</title>
    </head>
    <body>
        <!--_header 作为公共模版分离出去-->
        <header class="navbar-wrapper">
            <div class="navbar navbar-fixed-top">
                <div class="container-fluid cl">
                    <a class="logo navbar-logo f-l mr-10 hidden-xs" href="#">UserManager-Admin</a>
                    <a class="logo navbar-logo-m f-l mr-10 visible-xs" href="#">UserManager-Admin</a>
                    <span class="logo navbar-slogan f-l mr-10 hidden-xs">v1.0</span>
                    <a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:;">&#xe667;</a>
                    <nav id="Hui-userbar" class="nav navbar-nav navbar-userbar hidden-xs">
                        <ul class="cl">
                            <li id="email"></li>
                            <li class="dropDown dropDown_hover"><a href="#" class="dropDown_A">admin <i class="Hui-iconfont">&#xe6d5;</i></a>
                                <ul class="dropDown-menu menu radius box-shadow">
                                    <li><a id="profile" href="javascript:;">个人信息</a></li>
                                    <li><a id="logout" href="#">退出</a></li>
                                </ul>
                            </li>
                            <li id="Hui-skin" class="dropDown right dropDown_hover">
                                <a href="javascript:;" class="dropDown_A" title="换肤">
                                    <i class="Hui-iconfont" style="font-size:18px">&#xe62a;</i>
                                </a>
                                <ul class="dropDown-menu menu radius box-shadow">
                                    <li><a href="javascript:;" data-val="default" title="默认（黑色）">默认（黑色）</a></li>
                                    <li><a href="javascript:;" data-val="blue" title="蓝色">蓝色</a></li>
                                    <li><a href="javascript:;" data-val="green" title="绿色">绿色</a></li>
                                    <li><a href="javascript:;" data-val="red" title="红色">红色</a></li>
                                    <li><a href="javascript:;" data-val="yellow" title="黄色">黄色</a></li>
                                    <li><a href="javascript:;" data-val="orange" title="橙色">橙色</a></li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <!--/_header 作为公共模版分离出去-->
        <!--_menu 作为公共模版分离出去-->
        <aside class="Hui-aside">
            <div class="menu_dropdown bk_2">
                <dl id="menu-article">
                    <dt class="selected"><i class="Hui-iconfont">&#xe616;</i> 用户管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
                    </dt>
                    <dd style="display:block">
                        <ul>
                            <li class="current"><a href="user.html" title="用户列表"><i class="Hui-iconfont">&#xe667;</i> 用户列表</a></li>
                        </ul>
                    </dd>
                </dl>
            </div>
        </aside>
        <div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a>
        </div>
        <!--/_menu 作为公共模版分离出去-->
        <section class="Hui-article-box">
            <nav class="breadcrumb">
                <i class="Hui-iconfont">&#xe67f;</i> 首页
                <span class="c-gray en">&gt;</span> 用户管理
                <span class="c-gray en">&gt;</span>用户
                <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
                   href="javascript:location.replace(location.href);" title="刷新">
                    <i class="Hui-iconfont">&#xe68f;</i>
                </a>
            </nav>
            <div class="Hui-article">
                <article class="cl pd-20">
                    <!--<div class="cl pd-5 bg-1 bk-gray mt-20">
                        <span class="l">
                            <a href="javascript:;" onclick="datadel()"
                               class="btn btn-danger radius">
                                <i class="Hui-iconfont">&#xe6e2;</i> 批量删除
                            </a>
                        </span>
                    </div>-->
                    <div class="mt-10">
                        <table class="table table-border table-bordered table-bg table-sort">
                            <thead>
                                <tr class="text-c">
                                    <th width="25"></th>
                                    <th>用户ID</th>
                                    <th>Email</th>
                                    <th>FirstName</th>
                                    <th>LstName</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
                                    <!--<th>操作</th>-->
                                </tr>
                            </thead>
                            <tbody>
                        </table>
                    </div>
                </article>
            </div>
        </section>
        <div id="profileBox" style="display: none;">
            <form class="form form-horizontal" id="profileForm">
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">用户ID：</label>
                    <div class="formControls col-xs-8 col-sm-7">
                        <input type="text" class="input-text" value="" placeholder="" id="userIdSpan" name="userid" disabled>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">邮箱：</label>
                    <div class="formControls col-xs-8 col-sm-7">
                        <input type="text" class="input-text" value="" placeholder="" id="emailSpan" name="email" disabled>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">FirstName：</label>
                    <div class="formControls col-xs-8 col-sm-7">
                        <input type="text" class="input-text" value="" placeholder="" id="firstNameSpan" name="firstName">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">LastName：</label>
                    <div class="formControls col-xs-8 col-sm-7">
                        <input type="text" class="input-text" value="" placeholder="" id="lastNameSpan" name="lastName">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"> 密码：</label>
                    <div class="formControls col-xs-8 col-sm-7">
                        <input type="password" class="input-text" value="**********" placeholder="" id="passwordSpan"
                               name="password">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">状态：</label>
                    <div class="formControls col-xs-8 col-sm-7">
                        <input type="text" class="input-text" value="" placeholder="" id="statusSpan" name="status" disabled>
                    </div>
                </div>
                <div class="row cl">
                    <div class="col-xs-8 col-sm-7 col-xs-offset-4 col-sm-offset-2">
                        <button id="updateBtn" class="btn btn-primary radius" type="button"><i class="Hui-iconfont">&#xe632;</i>
                            更新信息
                        </button>
                        <button id="closeBtn" class="btn btn-default radius" type="button">&nbsp;&nbsp;关闭&nbsp;&nbsp;</button>
                    </div>
                </div>
            </form>
        </div>
        <!--_footer 作为公共模版分离出去-->
        <script type="text/javascript" src="resources/h-ui/lib/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="resources/h-ui/lib/layer/2.4/layer.js"></script>
        <script type="text/javascript" src="resources/h-ui/static/h-ui/js/H-ui.js"></script>
        <script type="text/javascript" src="resources/h-ui/static/h-ui.admin/js/H-ui.admin.page.js"></script>
        <!--/_footer /作为公共模版分离出去-->

        <!--请在下方写此页面业务相关的脚本-->
        <script type="text/javascript" src="resources/h-ui/lib/My97DatePicker/4.8/WdatePicker.js"></script>
        <script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="resources/h-ui/lib/laypage/1.2/laypage.js"></script>
        <script type="text/javascript" src="resources/js/common.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#email").html(window.localStorage.getItem("email"));
                $('.table-sort').on('error.dt', function (e, settings, techNote, message) {
                    console.log('An error has been reported by DataTables: ', message);
                }).dataTable({
                    "processing": true,
                    "serverSide": true,
                    "ajax": {
                        "url": URL + "/user/query",
                        "type": "GET",
                        "error": function (XMLHttpRequest, textStatus, errorThrown) {
                            var index = layer.alert(XMLHttpRequest.responseText, function () {
                                if (XMLHttpRequest.status == 403) {
                                    location.href = "/login.html";
                                }
                                layer.close(index)
                            });
                        }
                    },
                    "columns": [
                        {"data": null},
                        {"data": "userid"},
                        {"data": "email"},
                        {"data": "firstName"},
                        {"data": "lastName"},
                        {"data": "status"},
                        {"data": "createtime"},
                    ],
                    "columnDefs": [
                        {
                            "targets": 0,
                            "render": function (data, type, full) {
                                return "<input type=\"checkbox\" value=\"\">";
                            }
                        },
                        {
                            "targets": 5,
                            "render": function (data, type, full) {
                                if (data == 20) {
                                    return "未激活";
                                } else if (data == 10) {
                                    return "正常";
                                } else if (data == 80) {
                                    return "已删除";
                                }
                            }
                        },
                        {
                            "targets": 6,
                            "render": function (data, type, full) {
                                return new Date(data || 0).toString();
                            }
                        }
                    ],
                    "language": {
                        "search": "按名字过滤:",
                        "searchPlaceholder": "firtName or lastName",
                        "paginate": {
                            "first": "首页",
                            "last": "最后一页",
                            "next": "下一页",
                            "previous": "上一页",
                        },
                        "infoFiltered": "",
                        "info": "显示第 _PAGE_ 页,总共: _PAGES_ 页",
                        "lengthMenu": "每页显示 _MENU_ 条数据",
                        "loadingRecords": "加载中...",
                        "processing": "正在处理...",
                        "zeroRecords": "数据为空",
                        "emptyTable": "数据为空",
                    }
                });
                var profileLayer;
                $('#profile').click(function () {
                    api("/user/myinfo", "GET", null,
                            function (data, textStatus, jqXHR) {
                                var user = data;
                                $('#userIdSpan').val(user.userid);
                                $('#emailSpan').val(user.email);
                                $('#firstNameSpan').val(user.firstName);
                                $('#lastNameSpan').val(user.lastName);
                                $('#statusSpan').val(user.status);
                                if (user.status == 20) {
                                    $('#statusSpan').html("未激活");
                                } else if (user.status == 10) {
                                    $('#statusSpan').html("正常");
                                } else if (user.status == 80) {
                                    $('#statusSpan').html("已删除");
                                }
                                profileLayer = layer.open({
                                    type: 1,
                                    shade: false,
                                    title: false, //不显示标题
                                    area: ['800px', '500px'], //宽高
                                    content: $('#profileBox'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                                    cancel: function () {
                                    }
                                });
                            });
                });
                $('#updateBtn').click(function () {
                    var json = $("#profileForm").serializeJson();
                    json.userid = $('#userIdSpan').val();
                    api("/user/update", "GET", {bean: $.objectToString(json)},
                            function (data, textStatus, jqXHR) {
                                if (!data.success) {
                                    layer.alert(data.retinfo);
                                } else {
                                    var index = layer.alert("更新成功", function () {
                                        layer.close(index);
                                        location.href = "/user.html";
                                    });
                                }
                            });
                });
                $('#closeBtn').click(function () {
                    layer.close(profileLayer);
                });
                $('#logout').click(function () {
                    api("/user/logout", "POST", null, function (data, textStatus, jqXHR) {
                        console.log(data);
                        var index = layer.alert("退出成功", function () {
                            location.href = "login.html";
                            layer.close(index)
                        });
                    });
                });
            });
        </script>
        <!--/请在上方写此页面业务相关的脚本-->
    </body>
</html>